<!-- eslint-disable prettier/prettier -->
<!-- 用户编辑弹窗 -->
<template>
	<ele-modal :width="850" :visible="visible" :confirm-loading="loading" title="货品详情" :body-style="{ paddingBottom: '8px' }" :footer="null" @update:visible="updateVisible" @ok="save">
		<a-form
			class="margin-y-15"
			:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
			:wrapper-col="{
				md: { span: 17 },
				sm: { span: 20 },
				xs: { span: 24 }
			}"
		>
			<a-row :gutter="24">
				<a-col :md="24" :sm="24" :xs="24">
					<!-- <table cellpadding="0" cellspacing="0" class="recepit_table">
						<tbody>
							<tr><td class="fw-bolder" colspan="8" style="background-color: #f5f5f5">货品详情</td></tr>
							<tr>
								<td>条形码</td>
								<td>{{ goods.bar_code || '' }}</td>
								<td>货品种类</td>
								<td>{{ goods.subclass_name || '' }}</td>
								<td>货品大类</td>
								<td>{{ goods.class_name || '' }}</td>
								<td rowspan="2">图片</td>
								<td rowspan="2"><img :src="goods.thumb_url" style="width:60px;height:60px;" v-if="goods.thumb_url" /></td>
							</tr>
							<tr>
								<td>货品名称</td>
								<td>{{ goods.name || '' }}</td>
								<td>货品成色</td>
								<td>{{ goods.quality_name || '' }}</td>
								<td>货品款式</td>
								<td>{{ goods.style_name || '' }}</td>
							</tr>
							<tr>
								<td>二级款式</td>
								<td>{{ goods.sub_style || '' }}</td>
								<td>净金重(g)</td>
								<td>{{ goods.gold_weight || '' }}</td>
								<td>总件重(g)</td>
								<td>{{ goods.piece_weight || '' }}</td>
								<td>内部款号</td>
								<td>{{ goods.style_model || '' }}</td>
							</tr>
							<tr>
								<td>手寸</td>
								<td>{{ goods.hand_inch || '' }}</td>
								<td>长度 (cm)</td>
								<td>{{ goods.length || '' }}</td>
								<td>内径(mm)</td>
								<td>{{ goods.inner_diameter || '' }}</td>
								<td>尺寸(mm)</td>
								<td>{{ goods.size || '' }}</td>
							</tr>
							<tr>
								<td>主石零售价</td>
								<td>{{ goods.main_stone_retail_price || '' }}</td>
								<td>工费零售方式</td>
								<td>
									<template v-if="goods.retail_labour_type == 1">
										计件
									</template>
									<template v-else-if="goods.retail_labour_type == 2">
										计克
									</template>
								</td>
								<td>零售方式</td>
								<td>
									<template v-if="goods.retail_type == 1">
										计件
									</template>
									<template v-else-if="goods.retail_type == 2">
										计克
									</template>
								</td>
								<td>标签价</td>
								<td>{{ goods.sticker_price || '' }}</td>
							</tr>
							<tr>
								<td>采购金价</td>
								<td>{{ goods.purchase_gold_price || '' }}</td>
								<td>采购工费</td>
								<td>{{ goods.purchase_labour_expenses || '' }}</td>
								<td>采购总额</td>
								<td>{{ goods.purchase_labour_amount || '' }}</td>
								<td>金料金价</td>
								<td>{{ goods.gold_material_price || '' }}</td>
							</tr>
							<tr>
								<td>损耗(0-1)</td>
								<td>{{ goods.loss || '' }}</td>
								<td>基础工费</td>
								<td>{{ goods.basic_labour || '' }}</td>
								<td>特殊工费</td>
								<td>{{ goods.special_labour || '' }}</td>
								<td>其他费用</td>
								<td>{{ goods.other_fee || '' }}</td>
							</tr>
							<tr>
								<td>证书费</td>
								<td>{{ goods.cert_fee || '' }}</td>
								<td>品牌附加费</td>
								<td>{{ goods.brand_extra_fee || '' }}</td>
								<td>成本</td>
								<td>{{ goods.cost || '' }}</td>
								<td>倍率</td>
								<td>{{ goods.multiplying_power || '' }}</td>
							</tr>
							<tr>
								<td>分销成本</td>
								<td>{{ goods.retail_cost || '' }}</td>
								<td>分销倍率</td>
								<td>{{ goods.retail_multiplying_power || '' }}</td>
								<td>数量</td>
								<td>{{ goods.num || '' }}</td>
								<td>证书1类型</td>
								<td>{{ goods.cert_first_cate || '' }}</td>
							</tr>
							<tr>
								<td>证书1编号</td>
								<td>{{ goods.cert_first_code || '' }}</td>
								<td>证书2类型</td>
								<td>{{ goods.cert_second_cate || '' }}</td>
								<td>证书2编号</td>
								<td>{{ goods.cert_second_code || '' }}</td>
								<td>经营品牌</td>
								<td>{{ goods.management_brand || '' }}</td>
							</tr>
							<tr>
								<td>品牌</td>
								<td>{{ goods.brand || '' }}</td>
								<td>贵金属颜色</td>
								<td>{{ goods.color || '' }}</td>
								<td>供应商名称</td>
								<td>{{ goods.supplier_name || '' }}</td>
								<td>供应商条码</td>
								<td>{{ goods.supplier_bar || '' }}</td>
							</tr>
							<tr>
								<td>供应商款号</td>
								<td>{{ goods.supplier_style_name || '' }}</td>
								<td>系列名称</td>
								<td>{{ goods.series_name || '' }}</td>
								<td>系列款式</td>
								<td>{{ goods.series_style_name || '' }}</td>
								<td>监管码</td>
								<td>{{ goods.supervision_code || '' }}</td>
							</tr>
							<tr>
								<td>旧条码号</td>
								<td>{{ goods.old_bar_code || '' }}</td>
								<td>财务分类</td>
								<td>{{ goods.finance_name || '' }}</td>
								<td>赠品类型</td>
								<td>{{ goods.gift_name || '' }}</td>
								<td>工艺类型</td>
								<td>{{ goods.technology_name || '' }}</td>
							</tr>
							<tr>
								<td>价格类型</td>
								<td>{{ goods.price_category_name || '' }}</td>
								<td>宝石类别</td>
								<td>{{ goods.gem_category_name || '' }}</td>
								<td>备注1</td>
								<td>{{ goods.note_first || '' }}</td>
								<td>备注2</td>
								<td>{{ goods.note_second || '' }}</td>
							</tr>
						</tbody>
					</table>

					<div>
						<div class="fs-16 fw-bolder margin-y-15">主石信息</div>
						<div>
							<vxe-table border show-overflow :column-config="{ resizable: true }" :loading="table1.loading" :data="table1.tableData">
								<vxe-column type="seq" title="NO" width="60" fixed="left" />
								<vxe-column field="name" title="石料名称" width="150" />
								<vxe-column field="gem_category_name" title="宝石类别" width="150" />
								<vxe-column field="price" title="单价" width="150" />
								<vxe-column field="num" title="数量" width="150" />
								<vxe-column field="amount" title="总价" width="150" />
								<vxe-column field="weight" title="重量" width="150" />
								<vxe-column field="stone_name" title="石号" width="150" />
								<vxe-column field="form_name" title="形状" width="150" />
								<vxe-column field="color_name" title="颜色" width="150" />
								<vxe-column field="neatness_name" title="净度" width="150" />
								<vxe-column field="cut_name" title="切工" width="150" />
								<vxe-column field="buffing_name" title="抛光" width="150" />
								<vxe-column field="symmetric_name" title="对称" width="150" />
								<vxe-column field="fluorescence_name" title="荧光" width="150" />
								<vxe-column field="fluorescence_color" title="荧光颜色" width="150" />
								<vxe-column field="inlay_fee" title="镶嵌工费" width="150" />
								<vxe-column field="cert_fee" title="证书费" width="150" />
								<vxe-column field="cert_cate" title="证书类型" width="150" />
								<vxe-column field="cert_code" title="证书编号" width="150" />
							</vxe-table>
						</div>
					</div>
					<div>
						<div class="fs-16 fw-bolder margin-y-15">副石信息</div>
						<div>
							<vxe-table border show-overflow ref="xTable" :column-config="{ resizable: true }" :loading="table2.loading" :data="table2.tableData">
								<vxe-column type="seq" title="NO" width="60" fixed="left" />
								<vxe-column field="name" title="石料名称" width="150" />
								<vxe-column field="gem_category_name" title="宝石类别" width="150" />
								<vxe-column field="price" title="单价" width="150" />
								<vxe-column field="num" title="数量" width="150" />
								<vxe-column field="amount" title="总价" width="150" />
								<vxe-column field="weight" title="重量" width="150" />
								<vxe-column field="stone_name" title="石号" width="150" />
								<vxe-column field="form_name" title="形状" width="150" />
								<vxe-column field="color_name" title="颜色" width="150" />
								<vxe-column field="neatness_name" title="净度" width="150" />
								<vxe-column field="cut_name" title="切工" width="150" />
								<vxe-column field="buffing_name" title="抛光" width="150" />
								<vxe-column field="symmetric_name" title="对称" width="150" />
								<vxe-column field="fluorescence_name" title="荧光" width="150" />
								<vxe-column field="fluorescence_color" title="荧光颜色" width="150" />
								<vxe-column field="inlay_fee" title="镶嵌工费" width="150" />
								<vxe-column field="cert_fee" title="证书费" width="150" />
								<vxe-column field="cert_cate" title="证书类型" width="150" />
								<vxe-column field="cert_code" title="证书编号" width="150" />
							</vxe-table>
						</div>
					</div> -->
					<goodsDetailTable v-if="showDetail" v-model:visible="showDetail" :goods="goods" :table1="table1" :table2="table2"/>
				</a-col>
			</a-row>
		</a-form>
	</ele-modal>
</template>

<script setup>
  import { ref, unref, reactive, onMounted } from 'vue';
  import { Form } from 'ant-design-vue';
  import { message, Modal } from 'ant-design-vue';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import { useRouter } from 'vue-router';
  import goodsDetailTable from '@/components/jewelry/goodsDetailTable.vue';
  import { goods_detail } from '@/api/jewelry/receipts_purchase';

  const tableRef = ref(null);
  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    goodsCode: String
  });

  const emit = defineEmits(['update:visible', 'load']);
  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);
  console.log(query);

  // 提交状态
  const loading = ref(false);
  const form = reactive({
    code: '',
    goods_code: []
  });
  const showDetail = ref(true);
  const goods = ref({});
  //主石信息
  const table1 = reactive({
    loading: false,
    tableData: [
      {
        type: 1,
        name: '',
        gem_category_name: '',
        price: '',
        amount: '',
        num: 1,
        weight: '',
        stone_code: '',
        form: '',
        specs: '',
        color: '',
        neatness: '',
        cut: '',
        buffing: '',
        symmetric: '',
        fluorescence: '',
        fluorescence_color: '',
        inlay_fee: '',
        cert_fee: '',
        cert_cate: '',
        cert_code: ''
      }
    ]
  });
  //副石信息
  const table2 = reactive({
    loading: false,
    tableData: [
      {
        type: 2,
        name: '',
        gem_category_name: '',
        price: '',
        amount: '',
        num: 1,
        weight: '',
        stone_code: '',
        form: '',
        specs: '',
        color: '',
        neatness: '',
        cut: '',
        buffing: '',
        symmetric: '',
        fluorescence: '',
        fluorescence_color: '',
        inlay_fee: '',
        cert_fee: '',
        cert_cate: '',
        cert_code: ''
      }
    ]
  });

  onMounted(() => {
    console.log('goodsCode', props.goodsCode);
    goods_detail({ goods_code: props.goodsCode })
      .then((res) => {
        goods.value = res.goods_info;
        table1.tableData = res.goods_info.master_gem;
        table2.tableData = res.goods_info.slave_gem;
      })
      .catch((e) => {
        message.error(e);
      });
  });
  const save = () => {
    updateVisible(false);
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style scoped></style>
